<template>
  <div class="redactaddress">
    <Header>
      <template v-slot:left>
        <span @click="goto()">&lt;修改地址</span>
      </template>
      <template v-slot:right>
        <span>...</span>
      </template>
    </Header>
    <div class="list">
      <div class="name">
        姓名：
        <input type="text" v-model="name" :placeholder="this.$route.query.item.name" />
      </div>
      <div class="phone">
        电话：
        <input type="text" v-model="phone" :placeholder="this.$route.query.item.phone" />
      </div>
      <div class="address">
        地址：
        <input type="text" v-model="address" :placeholder="this.$route.query.item.address" />
      </div>
      <div class="housenum">
        门牌号：
        <input type="text" v-model="housenum" :placeholder="this.$route.query.item.housenum" />
      </div>
      <div class="btn">
        <div class="delete" @click="remove()">删除</div>
        <div class="save" @click="save()">保存</div>
      </div>
    </div>
  </div>
</template>


<script>
import { mapMutations, mapState } from "vuex";
import Header from "../../../components/Header";
export default {
  data() {
    return {
      name: "",
      phone: "",
      address: "",
      housenum: "",
      id: ""
    };
  },
  components: {
    Header
  },
  computed: {
    ...mapState(["addresslist"])
  },
  methods: {
    ...mapMutations(["redactAddress"]),
    //删除地址
    remove() {
      let id = this.$route.query.id;
      let i = this.addresslist.findIndex(item => {
        return item.id === id;
      });
      this.addresslist.splice(i, 1);
      this.$router.push({ name: "wodedz" });
    },
    //修改保存地址
    save() {
      this.item = this.$route.query.item;
      this.redactAddress({
        name: this.name,
        phone: this.phone,
        address: this.address,
        housenum: this.housenum,
        id: this.$route.query.id
      });
      this.$router.push({ name: "wodedz" });
    },
    goto() {
      this.$router.push({ name: "wodedz" });
    }
  }
};
</script>

<style>
</style>